import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:get/get.dart';

import 'index.dart';
import '../../../common/utils/index.dart';

class HomeIndexPage extends GetView<HomeIndexController> {
  const HomeIndexPage({super.key});

  // 主视图
  Widget _buildView() {
    return Obx(() {
      // 如果颜色列表还没初始化，显示加载页面
      if (controller.pageColors.isEmpty) {
        return const Center(
          child: CircularProgressIndicator(),
        );
      }
      
      return PageView.builder(
        controller: controller.pageController,
        scrollDirection: Axis.vertical,
        physics: const BouncingScrollPhysics(), // 添加弹性效果
        onPageChanged: controller.onPageChanged,
        itemCount: controller.totalPages,
        itemBuilder: (context, index) {
          return AnimatedContainer(
            duration: const Duration(milliseconds: 300),
            curve: Curves.easeInOut,
            child: _buildPage(index),
          );
        },
      );
    });
  }

  // 构建单个页面
  Widget _buildPage(int index) {
    final color = controller.pageColors[index];
    return GestureDetector(
      onTap: controller.onTap,
      child: Container(
        width: double.infinity,
        height: double.infinity,
        decoration: BoxDecoration(
          gradient: LinearGradient(
            begin: Alignment.topLeft,
            end: Alignment.bottomRight,
            colors: [
              color,
              color.withOpacity(0.8),
              color.withOpacity(0.9),
            ],
            stops: const [0.0, 0.7, 1.0],
          ),
        ),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            // 页面内容
            AnimatedContainer(
              duration: const Duration(milliseconds: 500),
              curve: Curves.elasticOut,
              padding: const EdgeInsets.all(20),
              decoration: BoxDecoration(
                color: Colors.white.withOpacity(0.95),
                borderRadius: BorderRadius.circular(20),
                boxShadow: [
                  BoxShadow(
                    color: Colors.black.withOpacity(0.1),
                    blurRadius: 15,
                    offset: const Offset(0, 5),
                  ),
                ],
              ),
              child: Column(
                mainAxisSize: MainAxisSize.min,
                children: [
                  Text(
                    '页面 ${index + 1}',
                    style: const TextStyle(
                      fontSize: 28,
                      fontWeight: FontWeight.bold,
                      color: Colors.black87,
                    ),
                  ),
                  const SizedBox(height: 15),
                  Container(
                    width: 50,
                    height: 50,
                    decoration: BoxDecoration(
                      color: color,
                      borderRadius: BorderRadius.circular(25),
                      border: Border.all(
                        color: Colors.white,
                        width: 3,
                      ),
                      boxShadow: [
                        BoxShadow(
                          color: color.withOpacity(0.4),
                          blurRadius: 10,
                          offset: const Offset(0, 3),
                        ),
                      ],
                    ),
                  ),
                  const SizedBox(height: 15),
                  Text(
                    'RGB: (${color.red}, ${color.green}, ${color.blue})',
                    style: const TextStyle(
                      fontSize: 14,
                      color: Colors.grey,
                      fontFamily: 'monospace',
                    ),
                  ),
                  const SizedBox(height: 20),
                  const Icon(
                    Icons.touch_app,
                    size: 30,
                    color: Colors.grey,
                  ),
                  const Text(
                    '点击刷新所有颜色',
                    style: TextStyle(
                      fontSize: 12,
                      color: Colors.grey,
                      fontWeight: FontWeight.w500,
                    ),
                  ),
                ],
              ),
            ),
            const SizedBox(height: 40),
            // 滑动提示 - 使用通用提示组件
            HintTipWidget.swipe(),
          ],
        ),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return GetBuilder<HomeIndexController>(
      init: HomeIndexController(),
      id: "home_index",
      builder: (_) {
        return Scaffold(
          extendBodyBehindAppBar: true,
          appBar: _buildAppBar(),
          body: _buildView(),
        );
      },
    );
  }

  // 构建AppBar
  PreferredSizeWidget _buildAppBar() {
    return AppBar(
      elevation: 0,
      backgroundColor: Colors.transparent,
      // 滑动灰度问题已由全局主题解决，无需重复配置
      systemOverlayStyle: const SystemUiOverlayStyle(
        statusBarColor: Colors.transparent,
        statusBarIconBrightness: Brightness.light,
        statusBarBrightness: Brightness.dark,
      ),
      leading: Container(
        margin: const EdgeInsets.all(8),
        decoration: BoxDecoration(
          color: Colors.black.withOpacity(0.15), // 降低不透明度，减少灰度
          borderRadius: BorderRadius.circular(12),
          // 添加边框增强视觉效果
          border: Border.all(
            color: Colors.white.withOpacity(0.2),
            width: 0.5,
          ),
        ),
        child: IconButton(
          onPressed: controller.onMoreTap,
          icon: const Icon(
            Icons.menu,
            color: Colors.white,
            size: 22,
          ),
        ),
      ),
      actions: [
        Container(
          margin: const EdgeInsets.all(8),
          decoration: BoxDecoration(
            color: Colors.black.withOpacity(0.15), // 降低不透明度，减少灰度
            borderRadius: BorderRadius.circular(12),
            // 添加边框增强视觉效果
            border: Border.all(
              color: Colors.white.withOpacity(0.2),
              width: 0.5,
            ),
          ),
          child: IconButton(
            onPressed: controller.onSearchTap,
            icon: const Icon(
              Icons.search,
              color: Colors.white,
              size: 22,
            ),
          ),
        ),
      ],
    );
  }
}
